<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <title>title</title>
      <link rel="stylesheet" type="text/css" href="../../../css/api.css"/>
      <style>
      body{margin: 0;padding: 0}
      h1,h2,h3,h4,h5,h6{font-weight: normal;}
      img{border: none}
      :focus{outline: none}
      input{background-color: rgba(0,0,0,0)}
          section{padding: 0 ;width: 100%;box-sizing: border-box;padding-top: 23px;}
          section .col{border-bottom: 1px solid #F5F5F5;height: 50px;position: relative;width: 100%;box-sizing: border-box;padding: 0 15px;}
          section .col *{line-height: 2em;color: #333}
          section .col input{display: block;;width: 100%;height: 50px;color: #999;padding-left:50px;box-sizing: border-box;padding-left: 70px;border: none;text-align: left;line-height: 50px;text-align: right;}
          section .col input::-webkit-input-placeholder {color:#B8B8B8;font-size: 12px;}
          section .col input::-moz-placeholder{color:#B8B8B8;font-size: 12px;}
          section .col input:-moz-placeholder {color:#B8B8B8;font-size: 12px;}
          section .col input:-ms-input-placeholder {color:#B8B8B8;font-size: 12px;}
          section .col label{position: absolute;left:15px;height: 50px;top:0;line-height: 50px;font-size:14px;}
          section .col .img{position: absolute;right:15px;top:0px;overflow: hidden;width:60px;height: 60px;border-radius: 50%}
          section .col .img img{width: 100%;}
          section .geren{ height: 150px}
          section  .geren textarea{ width: 95%; height: 150px; margin: 0;margin-top:40px;font-size: 14px;line-height: 2em;border: none;color: #666;}
          section .qiehuan{ margin-top: 130px}
          section .tx input{opacity: 0}
          section .tx p{position: absolute;left: 85px;height: 70px;line-height: 70px;top: 0;color:#B8B8B8;margin: 0;font-size: 12px;}
          section   .submit input{background-color: #fc8622;color: #fff;text-align: center;line-height: 50px;padding-left: 0;margin-top: 30px;border-radius: 4px;-webkit-appearance: none;}
          section .tx{height: 70px;}
            section .tx label{height: 70px;line-height: 70px;}
      </style>
  </head>
  <body>
<section id="zlxg">
  <div class="col tx" onclick="fnpicfil();">
  <label for="">头&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;像</label> <p>点击右侧上传头像</p> <input type="hidden" value="点击右侧上传头像"> <div class="img"><img :src="touxiang" alt=""></div>
  </div>
  <div class="col">
  <label for="">昵&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;称</label>  <input type="text" id="name" placeholder="请输入您的昵称"  :value="name" > </div>
  </div>
  <!-- <div class="col ">
  <label for="">电&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;话</label>  <input type="text" id="phone" oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入您的邮箱"  :value="phone"> </div>
  </div> -->
  <div class="col ">
  <label for="">电&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;话</label>  <input type="text" id="phone" oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入您的手机号"  :value="phone"> </div>
  </div>
  <div class="col ">
  <label for="">年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;龄</label>  <input type="text" :value="age" oninput="value=value.replace(/[^\d]/g,'')" id="age" placeholder="请输入您的年龄，仅数字"  > </div>
  </div>
  <div class="col ">
  <label for="">地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;址</label>  <input type="text" id="dizhi" placeholder="请输入您的常住地" :value="dizhi" > </div>
  </div>
  <div class="col ">
  <label for="">工作年限</label>  <input type="text" oninput="value=value.replace(/[^\d]/g,'')" id="nianxian" placeholder="请输入工作的年限" :value="nianxian"  > </div>
  </div>
  <div class="col " id="shebeiid"  onclick="tanchu(1)">
  <label for="">擅长设备</label>  <div  id="shebei" style="float:right;font-size:12px;color:#888;text-align:center;line-height:50px;">{{shebei}}</div> </div>
  </div>

  <div class="col " id="dianjiaid"  onclick="tanchu(2)">
  <label for="">个人类型</label>  <div  id="dianjia" style="float:right;font-size:12px;color:#888;text-align:center;line-height:50px;">{{dianjia}}</div> </div>
  </div>

  <div class="col geren" >
  <label for="">个人简介:</label>  <textarea type="text" id="jianjie"  placeholder="请简单介绍下你自己">{{jianjie}}</textarea>
  </div>
  <!-- <div class="col ">
  <label for="">工作单位</label>  <input type="text" placeholder="请输入您的工作单位"> </div>
  </div> -->

  </div>
    <div class="col submit" style="margin-bottom:10px;border-bottom：none">
      <input type="submit" value="确认修改" onclick="fnclose()">
    </div>
</section>



<!-- 拒绝弹窗 -->
<style>
.jjtc{position: fixed;left: 0;top: 0;width: 100%;height: 100%;box-sizing: border-box;background-color: rgba(0,0,0,0.25);z-index: 1000000;display: none;}
.jjtc .box{position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);background-color: #fff;width:250px;height: 190px;border-radius: 4px;box-sizing: border-box;;overflow:hidden}
#jjtc .box{height: 230px;}
.jjtc .top{;width: 100%;height: 40px;background-image: -moz-linear-gradient( 90deg, rgb(253,139,59) 0%, rgb(255,106,1) 100%);background-image: -webkit-linear-gradient( 90deg, rgb(253,139,59) 0%, rgb(255,106,1) 100%); background-image: -ms-linear-gradient( 90deg, rgb(253,139,59) 0%, rgb(255,106,1) 100%);}
.jjtc .top h4{margin-top: 0;text-align: center;color: #fff;font-size: 12px;line-height: 40px;}
.jjtc .box .close{position: absolute;top: 17px;right: 10px;width: 7px;height: 7px;cursor: pointer;}
.jjtc .box .close img{width: 100%;display: block;}
.jjtc .box .tetx{width: 100%;height: 120px;box-sizing: border-box;padding: 20px 24px;}
.jjtc .box .tetx .col{width:100%;height: 30px;box-sizing: border-box;border-radius: 2px;text-align: center;;color: #999;font-size: 12px;line-height: 30px;border: 1px solid #e7e7e7;float: left;margin-bottom: 10px;}
.jjtc .box .tetx .col:nth-child(2n){float: right;}
.jjtc .box button{display: block;margin: 0 auto;width:203px;height: 40px;box-sizing: border-box;color: #fff;font-size: 13px;text-align: center;line-height: 40px;background-color: #fc8622;border-radius: 2px}
.checked{color: #fc8622!important;border-color: #fc8622!important}
.clearfix{clear: both;}
</style>

<div class="jjtc" id="jjtc" onclick="disnone()">
  <div class="box">
    <div class="top">
          <h4>选择擅长的设备</h4>
    </div>
    <div class="tetx">
      <div class="jjly jj col" onclick="jjthis(0)">
        小挖(10吨以下)
      </div>
      <div class="jjly jj col" onclick="jjthis(1)">
        中挖(10~20吨)
      </div>
      <div class="jjly jj col" onclick="jjthis(2)">
        中大挖(20~30吨)
      </div>
      <div class="jjly jj col" onclick="jjthis(3)">
        大挖(30吨以上)
      </div>
      <div class="clearfix"></div>
    </div>
  </div>
</div>




<div class="jjtc" id="dj" onclick="disnone()">
  <div class="box">
    <div class="top">
          <h4>个人类型</h4>
    </div>
    <div class="tetx">
      <div class="jjly dj col" onclick="djthis(0)">
        加油
      </div>
      <div class="jjly dj col" onclick="djthis(1)">
        拖车
      </div>
      <div class="jjly dj col" onclick="djthis(2)">
        机手
      </div>
      <div class="clearfix"></div>
    </div>

  </div>
</div>

  </body>
  <script type="text/javascript" src="../../script/api.js"></script>
  <script type="text/javascript" src="../../script/vue.min.js" ></script>
  <script type="text/javascript">
      apiready = function(){
         zlxg = new Vue({
                   el: '#zlxg',
                   data: {
                         touxiang:"../../image/ns.jpg",
                         name:"未命名的用户",
                         phone:'',
                         jianjie:"一个优秀的人",
                         shebei:"点击选择擅长的设备",
                         age:"",
                         nianxian:"",
                         dizhi:"",
                         dianjia:"机手"
                   }
               });
        // console.log($api.getStorage("touxiang"));
        if($api.getStorage("touxiang")){
          zlxg.touxiang=$api.getStorage("touxiang");
        }
        if($api.getStorage("name")){
          zlxg.name=$api.getStorage("name");
        }
        if($api.getStorage("phone")){
          zlxg.phone=$api.getStorage("phone");
        }
        if($api.getStorage("jianjie")){
          zlxg.jianjie=$api.getStorage("jianjie");
        }
        if($api.getStorage("age")){
          zlxg.age=$api.getStorage("age");
        }
        if($api.getStorage("name")){
          zlxg.nianxian=$api.getStorage("nianxian");
        }
        if($api.getStorage("phone")){
          zlxg.dizhi=$api.getStorage("dizhi");
        }
        if($api.getStorage("jianjie")){
          zlxg.shebei=$api.getStorage("shebei");
        }



          if($api.getStorage("shebei")=="加油" || $api.getStorage("shebei")=="拖车"){
            $api.css($api.byId("shebeiid"), 'display:none');
            zlxg.dianjia=$api.getStorage("shebei");
          }else{
            zlxg.dianjia="机手";
          }




      };

var zlxg,dianjia;


function fnclose() {
        api.actionSheet({
            title: '是否确认修改',
            cancelTitle: '取消',
            buttons: ['确认修改']
        },function( ret, err ){
          if(ret.buttonIndex==1){

            // upadmin();

            var name = $api.byId('name');
            var phone = $api.byId('phone');
            var jianjie = $api.byId('jianjie');
            var nameval = $api.val(name);
            var phoneval =  $api.val(phone);
            var jianjieval =  $api.val(jianjie);
            var age = $api.val($api.byId("age"));
            var dizhi = $api.val($api.byId("dizhi"));
            var nianxian = $api.val($api.byId("nianxian")).replace(/\s+/g,"");
            var RexStr = /^((13)|(14)|(15)|(16)|(17)|(18)|(19))\\d{9}$/g;

          //console.log($api.text($api.byId("dianjia")));
            if($api.text($api.byId("dianjia")).replace(/\s+/g,"")=="拖车"){
            //  console.log(1);
              var shebei=   $api.text($api.byId("dianjia")).replace(/\s+/g,"");
            }else if($api.text($api.byId("dianjia")).replace(/\s+/g,"")=="加油"){
              var shebei=   $api.text($api.byId("dianjia")).replace(/\s+/g,"");
            }else{
              var shebei = $api.text($api.byId("shebei")).replace(/\s+/g,"");
            }



          if(nameval.length>10){
            api.toast({
                msg: '用户名过长，请重新输入',
                duration: 2000,
                location: 'bottom'
            });
          // console.log('用户名错误')

        }else if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(phoneval))){
            api.toast({
                msg: '手机号不正确，请重新输入',
                duration: 2000,
                location: 'bottom'
            });
            // console.log(phoneval)
            // console.log('手机号错误')
          }else{


            api.ajax({
                url: $api.getStorage("backapi")+'/index.php?c=home&m=upadmin',
                method: 'post',
                data: {
                    values: {
                        name: nameval,
                        phone:phoneval,
                        id:$api.getStorage("member"),
                        jianjie:jianjieval,
                        age:age,
                        dizhi:dizhi,
                        nianxian:nianxian,
                        shebei:shebei,
                    },
                }

            },function(ret, err){

              // console.log('ok修改成功了')
              //  console.log( JSON.stringify( err ) );
                if(err){
                  api.toast({
                    msg: '修改成功',
                    duration: 1000,
                    location: 'bottom'
                });
                $api.setStorage('name',nameval);
                $api.setStorage('phone',phoneval);
                $api.setStorage('jianjie',jianjieval);
                $api.setStorage('age',age);
                $api.setStorage('dizhi',dizhi);
                $api.setStorage('nianxian',nianxian);
                $api.setStorage('shebei',shebei);
          api.closeWin({

          });

                if(shebei=="拖车" || shebei=="加油"){
                  api.openWin({
                      name: 'picpost_win',
                      url: 'picpost_win.html',
                      pageParam:{
                        xiugai:1,
                        name:"检查证件"
                      }
                  });
                }

                }

  api.closeWin();
            });
          }







          }
        });


  }




        function fnpicfil(){
          api.actionSheet({
              title: '选择上传方式',
              cancelTitle: '取消',
              buttons: ['拍照上传','相册上传']
          },function( ret, err ){
            if(ret.buttonIndex==1){
              xiangji();
            }else if(ret.buttonIndex==2){
              fnpicfile1();
            }
          });


      }

        function fnpicfile1(){
          //imgclip(ret.imgPath)
            api.getPicture({
              sourceType: 'album',
              encodingType: 'jpg',
              mediaValue: 'pic',
              destinationType: 'base64',
              allowEdit: true,
              quality: 100,
              targetWidth: 800,
              targetHeight: 800,
              saveToPhotoAlbum: false
          }, function(ret, err) {
              if (ret) {
                uptouxiang(ret.base64Data)

              } else {
                  console.log(JSON.stringify(err));
              }
          });


        }


      function xiangji(){


      //  imgclip(ret.imgPath)
          api.getPicture({
            sourceType: 'camera',
            encodingType: 'jpg',
            mediaValue: 'pic',
            destinationType: 'base64',
            allowEdit: true,
            quality: 100,
            targetWidth: 800,
            targetHeight: 800,
            saveToPhotoAlbum: false
        }, function(ret, err) {
            if (ret) {
              uptouxiang(ret.base64Data)

            } else {
                console.log(JSON.stringify(err));
            }
        });
      }




function uptouxiang(data){
  var uid = $api.getStorage("member")
  api.ajax({
      url: $api.getStorage("backapi")+'/index.php?s=member&c=account&m=upload&iajax=1',
      method: 'post',
      data: {
          values: {
              tx: data,
              uid:uid
          },
      }
  },function(ret, err){
    var tximg = $api.getStorage("backapi")+'"/uploadfile/member/"+$api.getStorage("member")+"/800x800.jpeg"';
    // zlxg.touxiang=tximg;
    console.log(JSON.stringify(ret,err));
      if(err.body==1){
        // $api.setStorage('touxiang',tximg);
        // zlxg.touxiang = $api.getStorage('touxiang');
      cachetouxiang();
        api.toast({
            msg: '头像上传成功',
            duration: 2000,
            location: 'bottom'
        });
      }else{

        api.toast({
            msg: err.body,
            duration: 2000,
            location: 'bottom'
        });

      }
  });

}





function getBase64Image(img) {
     var canvas = document.createElement("canvas");
     canvas.width = img.width;
     canvas.height = img.height;
     var ctx = canvas.getContext("2d");
     ctx.drawImage(img, 0, 0, img.width, img.height);
     var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
     var dataURL = canvas.toDataURL("image/"+ext);
     return dataURL;
}




function cachetouxiang() {
                        api.imageCache({
                                thumbnail : true,
                                url : $api.getStorage("backapi")+'/uploadfile/member/'+$api.getStorage("member")+'/800x800.jpeg?txscsj='+(new Date()).getTime(),
                                policy:'cache_only',
                        }, function(ret, err) {
                                var url = ret.url;
                                //console.log(url + "*" + ret.status);
                                if (ret.status) {
                                  zlxg.touxiang=url;
                                   $api.setStorage('touxiang',url);
                                  // console.log(zlxg.touxiang);
                                }
                        });
                };




function upadmin(){
  var name = $api.byId('name');
  var phone = $api.byId('phone');
  var jianjie = $api.byId('jianjie');
  var nameval = $api.val(name);
  var phoneval =  $api.val(phone);
  var jianjieval =  $api.val(jianjie);
  var age = $api.val($api.byId("age"));
  var dizhi = $api.val($api.byId("dizhi"));
  var nianxian = $api.val($api.byId("nianxian")).replace(/\s+/g,"");

//console.log($api.text($api.byId("dianjia")));
  if($api.text($api.byId("dianjia")).replace(/\s+/g,"")=="拖车"){
  //  console.log(1);
    var shebei=   $api.text($api.byId("dianjia")).replace(/\s+/g,"");
  }else if($api.text($api.byId("dianjia")).replace(/\s+/g,"")=="加油"){
    var shebei=   $api.text($api.byId("dianjia")).replace(/\s+/g,"");
  }else{
    var shebei = $api.text($api.byId("shebei")).replace(/\s+/g,"");
  }

  // var phonzz = new RegExp(/^((13)|(14)|(15)|(16)|(17)|(18)|(19))\\d{9}$/);

if(nameval.length>10){
  api.toast({
      msg: '昵称不能超过10个字',
      duration: 2000,
      location: 'bottom'
  });
// console.log('00000')
}
else{

  api.ajax({
      url: $api.getStorage("backapi")+'/index.php?c=home&m=upadmin',
      method: 'post',
      data: {
          values: {
              name: nameval,
              phone:phoneval,
              id:$api.getStorage("member"),
              jianjie:jianjieval,
              age:age,
              dizhi:dizhi,
              nianxian:nianxian,
              shebei:shebei,
          },
      }

  },function(ret, err){
    console.log('ok修改成功了')
    //  console.log( JSON.stringify( err ) );
      if(err){
        api.toast({
          msg: '修改成功',
          duration: 1000,
          location: 'bottom'
      });
      $api.setStorage('name',nameval);
      $api.setStorage('phone',phoneval);
      $api.setStorage('jianjie',jianjieval);
      $api.setStorage('age',age);
      $api.setStorage('dizhi',dizhi);
      $api.setStorage('nianxian',nianxian);
      $api.setStorage('shebei',shebei);
api.closeWin({

});

      if(shebei=="拖车" || shebei=="加油"){
        api.openWin({
            name: 'picpost_win',
            url: 'picpost_win.html',
            pageParam:{
              xiugai:1,
              name:"检查证件"
            }
        });
      }

      }


  });
}


}



function fnLogin(){
  $api.rmStorage('member');
  api.showProgress({
      style: 'default',
      animationType: 'fade',
      title: '正在退出登录...',
      text: '请稍后...',
      modal: false
  });


  setTimeout(function(){api.rebootApp()},2000)
}


function djthis(data) {
  if(data==2){
    $api.css(  $api.byId('shebeiid'), 'display:block');
  }else{
      $api.css(  $api.byId('shebeiid'), 'display:none');
  }
  var djly=$api.domAll(".jjly.dj")

        for (var b = 0; b < djly.length; b++) {

            if (data == b) {
                $api.addCls(djly[b], 'checked');
                $api.text($api.byId("dianjia"), $api.text(djly[b]));
            } else {
                $api.removeCls(djly[b], 'checked');
            }
        }


}



function jjthis(data) {
  var jjly=$api.domAll(".jjly.jj")

        for (var b = 0; b < jjly.length; b++) {

            if (data == b) {
                $api.addCls(jjly[b], 'checked');
                  $api.text($api.byId("shebei"), $api.text(jjly[b]));
            } else {
                $api.removeCls(jjly[b], 'checked');
            }
        }
      $api.css($api.byId("dj"),'display:none')
}


function tanchu(data){
  if(data==1){
    $api.css($api.byId("jjtc"),'display:block')
  }else{
    $api.css($api.byId("dj"),'display:block')
  }

}
function disnone(){
    $api.css($api.byId("jjtc"),'display:none')
    $api.css($api.byId("dj"),'display:none')
}




  </script>
  </html>
